// ---------------top最后一个的百分数显示柱---------------------

//----------------------项目分布趋势图----------------------
// 项目分布顶部
const btn1 = document.querySelector(".btn1");
const datetime = document.querySelector("#datetime");
const date = document.querySelector(".date i");
const date1 = document.querySelector(".date span");

function dateTime() {
  const selectedDate = datetime.value;
  datetime.oninput = () => {
    const a = datetime.value;
    const b = new Date(a);
    console.log(b);
    const c = b.getFullYear();
    const d = b.getMonth() + 1;
    const e = b.getDate();
    date.innerHTML = `全年:${c}`;
    date1.innerHTML = `本月:${d}-${e}`;
  };
}
dateTime();

// ---------------柱状图数据区------------------

var option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [
        "10月",
        "11月",
        "12月",
        "01月",
        "02月",
        "03月",
        "04月",
        "05月",
        "06月",
        "07月",
        "08月",
        "09月",
      ],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "Direct",
      type: "bar",
      barWidth: "45%",
      data: [430, 350, 259, 272, 295, 245, 352, 300, 334, 390, 330, 320],
    },
  ],
};
function fn() {
  const myChart = echarts.init(document.querySelector("#main"));
  myChart.setOption(option);
}
function Date2() {
  const select1 = document.querySelector(".form-select");
  select1.addEventListener("change", function (el) {
    console.log(el.target.value);
    const a = el.target.value;
    if (a === "0") {
      console.log("aaa");
      option.series[0].data = [
        430, 350, 259, 272, 255, 245, 352, 280, 334, 390, 330, 220,
      ];
      fn();
    } else if (a === "1") {
      console.log("bbb");
      option.series[0].data = [
        150, 150, 195, 182, 195, 135, 142, 130, 120, 110, 130, 160,
      ];
      fn();
    } else if (a === "2") {
      console.log("ccc");
      option.series[0].data = [
        140, 150, 171, 152, 145, 175, 152, 180, 134, 152, 140, 120,
      ];
      fn();
    } else if (a === "3") {
      console.log("ddd");
      option.series[0].data = [
        140, 150, 192, 122, 135, 145, 152, 180, 124, 190, 140, 120,
      ];
      fn();
    }
  });
}
Date2();

// ---------------饼图数据区------------------
var option1 = {
  title: {
    text: "部门项目数量图",
    subtext: "数据",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "50%",
      data: [
        { value: 30, name: "结构" },
        { value: 25, name: "电子" },
        { value: 10, name: "装饰" },
        { value: 10, name: "其他" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};
// ----------------------------项目列表-------------------

// 添加项目按钮
const add = document.querySelector(".add");
add.onclick = () => {
  location.href = "#";
};
// 搜索框
const search = document.querySelector(".search1");
search.onclick = () => {
  console.log("aaa");
};

// 后端获取数据代码
axios({
  url: "http://m10.ctymc.cn:24048/projects",
  method: "GET",
}).then((res) => {
  // console.log(res.data[0].status);
  let key = 0;
  let key1 = 0;
  let key2 = 0;
  const list = res.data;
  const all = document.querySelector(".all h1 span");
  const go_on = document.querySelector(".go_on h1 span");
  const overdue = document.querySelector(".overdue h1 span");
  const accomplish = document.querySelector(".accomplish h1 span");
  all.innerHTML = `${list.length}`;
  const a = list.forEach((e, i) => {
    if (e.status === "active") {
      key++;
    }
    if (e.status === "overdue") {
      key1++;
    }
    if (e.status === "end") {
      key2++;
    }
  });
  go_on.innerHTML = `${key}`;
  overdue.innerHTML = `${key1}`;
  let calculate = key2 / list.length;
  const bar = document.querySelector(".progress_bar .bar");
  function percent() {
    bar.style.width = accomplish.innerHTML =
      parseFloat(calculate * 100).toFixed(2) + "%";
  }
  percent();
});

axios({
  url: "http://m10.ctymc.cn:24048/department",
  method: "GET",
}).then((res) => {
  const department = document.querySelector(".department ul  .pp em");
  const department1 = document.querySelector(".department ul  .oo em");
  const department2 = document.querySelector(".department ul .ii em");
  const department3 = document.querySelector(".department ul  .pp span");
  const department4 = document.querySelector(".department ul  .oo span");
  const department5 = document.querySelector(".department ul .ii span");

  department.innerHTML = res.data[0].department_name;
  department1.innerHTML = res.data[1].department_name;
  department2.innerHTML = res.data[2].department_name;
  department3.innerHTML = res.data[0].department_number;
  department4.innerHTML = res.data[1].department_number;
  department5.innerHTML = res.data[2].department_number;
  let data = [{ value: 5, name: "其他" }];
  let str = {};
  res.data.forEach((e, i) => {
    console.log(e.department_number);
    const value = e.department_number;
    console.log(e.department_name);
    const name1 = e.department_name;
    const name = name1.substring(0, 2);
    str = { value, name };
    data.push(str);
  });
  option1.series[0].data = data;
  const myChart1 = echarts.init(document.querySelector("#main1"));
  myChart1.setOption(option1);
});

// ---------------------------------------------------------------

function fn1() {
  axios({
    url: `http://m10.ctymc.cn:24048/projects`,
    method: "GET",
  }).then((res) => {
    console.log(res.data);
    const count = parseInt(res.data.length);
    console.log(count);
    const pageCount = Math.ceil(count / 5);
    console.log("一共有多少页", pageCount);
    document.querySelector(".pagination").innerHTML = "";
    for (let i = 1; i <= pageCount; i++) {
      document.querySelector(".pagination").innerHTML += ` 
    <li class="page-item">
      <a class="page-link" href="#" data-id="1">${i}</a>
    </li>
    `;
    }
    document.querySelectorAll(".pagination li").forEach((item, key) => {
      item.onclick = () => {
        console.log(key + 1);
        refresh(key + 1);
      };
    });
  });
}

// 渲染
const refresh = (page = 1, limit = 5) => {
  fn1();
  axios({
    url: `http://m10.ctymc.cn:24048/projects?_page=${page}&_limit=${limit}`,
    method: "GET",
  }).then((res) => {
    const listarr = res.data;
    console.log(listarr);

    document.querySelector("#list").innerHTML = res.data
      .map(
        (item, i) => `
        <tr>
        <td class="a">
          <div class="text1">
            <img src="./images/logo3.png" alt="" />
            <div><em>${item.projects_name}</em><br /><span>${
          item.description
        }</span></div>
          </div>
        </td>
        <td class="b"><em>项目组长</em><br /><span>${
          item.projects_leader
        }</span></td>
        <td class="c">
          <em>创建时间</em><br /><span>${item.start_time}</span>
        </td>
        <td class="d">
          <em>${
            item.status === "start"
              ? "开始项目"
              : item.status === "active"
              ? "进行项目"
              : item.status === "end"
              ? "完成项目"
              : item.status === "overdue"
              ? "逾期项目"
              : "过期项目"
          }</em>
          <br />
          <div>
            <p class="${
              item.status === "start"
                ? "color4"
                : item.status === "active"
                ? "color5"
                : item.status === "end"
                ? "color2"
                : item.status === "overdue"
                ? "color1"
                : "color3"
            }"></p>
          </div>
          <i>${
            item.status === "start"
              ? "10%"
              : item.status === "active"
              ? "49%"
              : item.status === "end"
              ? "100%"
              : item.status === "overdue"
              ? "已逾期"
              : "过期项目"
          }</i>
        </td>
        <td class="e">
          <em>操作</em>
          <p>
            <span class="update">编辑</span
            ><span class="del">删除 <em class="iconfont ">&#xeb04;</em></span>
          </p>
        </td>
        `
      )
      .join("");

    // 删除
    const del = document.querySelectorAll(".del");
    del.forEach((e, i) => {
      e.onclick = () => {
        const item = listarr[i];
        console.log(item);
        console.log(item.id);
        const ok = confirm("你确定要删除该项目的信息！");
        if (ok) {
          axios({
            url: `http://m10.ctymc.cn:24048/projects/${item.id}`,
            method: "DELETE",
          }).then((res) => {
            console.log(res);
            refresh();
            location.href = "./bc.html";
          });
        }
      };
    });

    // 修改
    const update = document.querySelectorAll(".update");
    update.forEach((e, i) => {
      e.onclick = () => {
        btn1.click();
        const item = listarr[i];
        console.log(item);
        const projects_name = item.projects_name;
        const description = item.description;
        const projects_leader = item.projects_leader;
        const start_time = item.start_time;
        console.log(projects_name, description, projects_leader, start_time);

        const projects1_name = document.querySelector(".projects_name");
        projects1_name.value = projects_name;

        const projects_description1 = document.querySelector(
          ".projects_description"
        );
        projects_description1.value = description;

        const projects_leader1 = document.querySelector(".projects_leader");
        projects_leader1.value = projects_leader;

        const projects_time1 = document.querySelector(".projects_time");
        projects_time1.value = start_time;

        const btn0 = (document.querySelector(".btn0").onclick = () => {
          axios({
            url: `http://m10.ctymc.cn:24048/projects/${item.id}`,
            method: "PUT",
            data: {
              projects_name: projects1_name.value,
              projects_leader: projects_leader1.value,
              start_time: projects_time1.value,
              description: projects_description1.value,
            },
          }).then((res) => {
            console.log(res);
            document.querySelector(".hider").classList.remove = "show";
            location.href = "./bc.html";
            refresh();
          });
        });
      };
    });
  });

  //
};
refresh();

function fn4(html_list) {
  document.querySelector("#list").innerHTML = html_list
    .map(
      (item, i) => `
<tr>
<td class="a">
  <div class="text1">
    <img src="./images/logo3.png" alt="" />
    <div><em>${item.projects_name}</em><br /><span>${
        item.description
      }</span></div>
  </div>
</td>
<td class="b"><em>项目组长</em><br /><span>${item.projects_leader}</span></td>
<td class="c">
  <em>创建时间</em><br /><span>${item.start_time}</span>
</td>
<td class="d">
  <em>${
    item.status === "start"
      ? "开始项目"
      : item.status === "active"
      ? "进行项目"
      : item.status === "end"
      ? "完成项目"
      : item.status === "overdue"
      ? "逾期项目"
      : "过期项目"
  }</em>
  <br />
  <div>
    <p class="${
      item.status === "start"
        ? "color4"
        : item.status === "active"
        ? "color5"
        : item.status === "end"
        ? "color2"
        : item.status === "overdue"
        ? "color1"
        : "color3"
    }"></p>
  </div>
  <i>${
    item.status === "start"
      ? "10%"
      : item.status === "active"
      ? "49%"
      : item.status === "end"
      ? "100%"
      : item.status === "overdue"
      ? "已逾期"
      : "过期项目"
  }</i>
</td>
<td class="e">
  <em>操作</em>
  <p>
    <span class="update">编辑</span
    ><span class="del">删除 <em class="iconfont ">&#xeb04;</em></span>
  </p>
</td>
`
    )
    .join("");
}

const list_page = document.querySelector(".list_page");
const input = document.querySelector(".ccc");
const search1 = document.querySelector(".search1");
search1.onclick = () => {
  const value = input.value;
  console.log(value);
  let list1 = [];

  function fn2() {
    list_page.style.display = "none";
    const all0 = document.querySelector(".all0");
    all0.onclick = () => {
      list_page.style.display = "block";
      refresh();
      location.href = "./bc.html";
    };
    axios({
      url: `http://m10.ctymc.cn:24048/projects`,
      method: "GET",
    }).then((res) => {
      const data1 = res.data;
      console.log(data1);
      data1.forEach((e, i) => {
        console.log(e.projects_name);
        console.log(e.status);
        if (e.projects_name === value.trim()) {
          list1.push(e);
        }
      });
      console.log(list1);

      const on = document.querySelector(".on");
      on.onclick = () => {};

      const start = document.querySelector(".start");
      start.onclick = () => {};

      if (list1.length === 0) {
        list_page.style.display = "block";
        alert("未查询到该项目信息，请重试！");
        location.href = "./bc.html";
      } else {
        alert("查询成功！");
        // fn4(list1);
        // location.href = "./bc.html";
        // list_page.style.display = "none";
        fn4(list1);
      }
    });
  }
  fn2();
};

let list2 = [];
let list3 = [];
let list4 = [];
function fn3() {
  axios({
    url: `http://m10.ctymc.cn:24048/projects`,
    method: "GET",
  }).then((res) => {
    const data1 = res.data;
    console.log(data1);
    console.log(data1[1].status);
    data1.forEach((e, i) => {
      console.log(e.status);
      list4.push(e);
      if (e.status === "active") {
        list2.push(e);
      }
      if (e.status === "start") {
        list3.push(e);
      }
    });
    console.log(list2);
    console.log(list3);
  });

  // 排他思想进行中的
  const li1 = document.querySelectorAll(".list_top ul li");
  li1.forEach((e) => {
    e.onclick = (el) => {
      console.log(el.target);
      if (el.target.tagName !== "LI") return;
      const old = document.querySelector(".active");
      old && old.classList.remove("active");
      el.target.classList.add("active");
      console.log(el.target.dataset.id);
      if (el.target.dataset.id === "1") {
        location.href = "./bc.html";
      }
      if (el.target.dataset.id === "2") {
        list_page.style.display = "none";
        fn4(list2);
      }
      if (el.target.dataset.id === "3") {
        list_page.style.display = "none";
        fn4(list3);
      }
    };
  });
}
fn3();
